<template>
	<div class="main">
		<div>
			<div>
				<div>
					<div>
						<img v-if="leftInfoData.avatar" :src="leftInfoData.avatar">
						<img v-else src="@/assets/images/wechat/student/balance/avatar.png">
					</div>
				</div>
				<div>{{leftInfoData.name}}</div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/balance/pk.png">
			</div>
			<div>
				<div>{{rightInfoData.name}}</div>
				<div>
					<div>
						<img v-if="rightInfoData.avatar" :src="rightInfoData.avatar">
						<img v-else src="@/assets/images/wechat/student/balance/avatar.png">
					</div>
				</div>
			</div>
		</div>
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/balance/right.png">
				</div>
				<div>{{contestData.senderScore}}分</div>
			</div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/balance/left.png">
				</div>
				<div>{{contestData.recipientScore}}分</div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/balance/mid.png">
			</div>
			<div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/balance/2.png">
					</div>
					<div>
						连续答对{{contestData.senderScore/10}}题
					</div>
				</div>
			</div>
			<div>
				<div>
					<div>
						<img src="@/assets/images/wechat/student/balance/1.png">
					</div>
					<div>
						连续答对{{contestData.recipientScore/10}}题
					</div>
				</div>
			</div>
		</div>
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/balance/qianbi.png">
				</div>
				<div>
					金币+0
				</div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/balance/3.png">
			</div>
		</div>
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/balance/answer.png">
				</div>
				<div class="answer">
					金币+0
				</div>
			</div>
			<div>
				<img src="@/assets/images/wechat/student/balance/3.png">
			</div>
		</div>
		<div @click="toBattle()">再来一局</div>
		<div>分享结果</div>
	</div>
</template>

<script>
	import router from '@/router/index'
	import { findContestById,updateContestById } from '@/api/contest'
	import { findStudentById } from '@/api/student'
	export default {
		components: {
			
		},
		data() {
			return {
				contestData: {
					id: '',
					senderScore: 0,
					recipientScore: 0,
					robot: false
				},
				leftInfoData:{
					id: '',
					avatar: '',
					name:'----',
				},
				rightInfoData:{
					id: '',
					avatar: '',
					name:'----'
				}
			}
		},
		created:async function() {
			this.contestData.id=this.$route.query.id
			if(!this.contestData.id){
				router.replace("/wechatstudent/stucenter")
				return
			}
			const ajaxData = {}
			ajaxData.id = this.contestData.id
			const resultData = await findContestById(ajaxData)
			if(resultData.code==200){
				this.contestData.id=resultData.data.id
				this.contestData.senderScore=resultData.data.senderScore
				this.contestData.recipientScore=resultData.data.recipientScore
				this.contestData.robot = resultData.data.robot
				this.findStudentById(resultData.data.senderId,0)
				this.findStudentById(resultData.data.recipientId,1)
			}
		},
		beforeMount: function() {
	
		},
		mounted: function() {
			
		},
		methods: {
			async toBattle(){
				const ajaxData = {}
				ajaxData.id = this.contestData.id
				ajaxData.status = 2
				const resultData = await updateContestById(ajaxData)
				if(this.contestData.robot) {
					router.replace("/wechatstudent/rankedgame")
				} else {
					router.replace("/wechatstudent/battle")
				}
			},
			async findStudentById(id,type) {
			  const ajaxData = {}
			  ajaxData.id = id
			  const resultData = await findStudentById(ajaxData)
			  if (resultData.code === 200) {
			    if(type == 0){
			    	this.leftInfoData = resultData.data
			    }else{
			    	this.rightInfoData = resultData.data
			    }
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height: 100vh;
		overflow: auto;
		background-image: url(../../../../assets/images/wechat/student/balance/bg.png);
		background-size: cover;
		>div:nth-child(1){
			margin-top:23px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height:60px;
			>div:nth-child(1){
				display:flex;
				align-items: center;
				>div:nth-child(2){
					margin-left:40px;
					font-size: 10px;
					font-weight: normal;
					color: #FFFFFF;
				}
				>div:nth-child(1){
					width:60px;
					height:60px;
					background-color: #62B89D;
					position: relative;
					>div{
						width:50px;
						height:50px;
						border-radius: 50%;
						overflow: hidden;
						position: absolute;
						top:0;
						bottom:0;
						left:35px;
						margin:auto;
						>img{
							width:100%;
						}
					}
				}
				>div:nth-child(1)::before{
					content:'';
					position: absolute;
					width:60px;
					height:60px;
					border-radius: 30px;
					top:0;
					left:30px;
					background-color: #62B89D;
				}
			}
			>div:nth-child(2){
				>img{
					width:100%;
				}
			}
			>div:nth-child(3){
				display:flex;
				align-items: center;
				>div:nth-child(1){
					font-size: 10px;
					font-weight: normal;
					color: #FFFFFF;
				}
				>div:nth-child(2){
					margin-left:40px;
					width:60px;
					height:60px;
					background-color: #FF9362;
					position: relative;
					>div{
						width:50px;
						height:50px;
						border-radius: 50%;
						overflow: hidden;
						position: absolute;
						top:0;
						bottom:0;
						left:-25px;
						margin:auto;
						>img{
							width:100%;
						}
					}
				}
				>div:nth-child(2)::before{
					content:'';
					position: absolute;
					width:60px;
					height:60px;
					border-radius: 30px;
					top:0;
					left:-30px;
					background-color: #FF9362;
				}
			}
		}
		>div:nth-child(2){
			position: relative;
			display:flex;
			height:75px;
			margin-top:7px;
			margin-bottom:50px;
			>div:nth-child(1),>div:nth-child(2){
				position: relative;
				>div:nth-child(2){
					position: absolute;
					left:0;
					right:0;
					top:0;
					bottom: 0;
					height:75px;
					line-height:75px;
					font-size: 31px;
					font-weight: normal;
					color: #FFFFFF;
				}
			}
			>div:nth-child(1){
				flex:1;
				>div:nth-child(2){
					left:40px;
				}
			}
			>div:nth-child(2){
				>div:nth-child(2){
					text-align: center;
				}
			}
			>div:nth-child(3){
				position: absolute;
				width:112px;
				height:112px;
				left:0;
				right:0;
				top:0;
				bottom: 0;
				margin:auto;
			}
			>div:nth-child(4){
				position: absolute;
				bottom:-10px;
				left:0;
				>div{
					position: relative;
					>div:nth-child(1){
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						position: absolute;
						left:0;
						right:0;
						top:0;
						bottom: 0;
						text-align: center;
						height: 21px;
						line-height: 21px;
						font-size: 10px;
						font-weight: normal;
						color: #620812;
					}
				}
			}
			>div:nth-child(5){
				position: absolute;
				bottom:-10px;
				right:0;
				>div{
					position: relative;
					>div:nth-child(1){
						>img{
							width:100%;
						}
					}
					>div:nth-child(2){
						position: absolute;
						left:0;
						right:0;
						top:0;
						bottom: 0;
						text-align: center;
						height: 21px;
						line-height: 21px;
						font-size: 10px;
						font-weight: normal;
						color: #620812;
					}
				}
			}
		}
		>div:nth-child(3),>div:nth-child(4){
			margin-top: 2px;
			>div:nth-child(1){
				display: flex;
				justify-content: center;
				height: 30px;
				align-items: center;
				>div:nth-child(1){
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					margin-left:16px;
					font-size: 14px;
					font-weight: normal;
					color: #FFFFFF;
				}
				>.answer{
					margin-left:9px !important;
				}
			}
			>div:nth-child(2){
				width:276px;
				margin:auto;
				>img{
					width:100%;
				}
			}
		}
		>div:nth-child(5){
			width:100px;
			line-height: 40px;
			background-color: #54A589;
			margin:auto;
			text-align: center;
			margin-top:250px;
			margin-bottom: 15px;
			border-radius: 8px;
			color:#FFFFFF;
			font-size:20px;
		}
		>div:nth-child(6){
			width:100px;
			line-height: 40px;
			background-color: #54A589;
			margin:auto;
			text-align: center;
			border-radius: 8px;
			color:#FFFFFF;
			font-size:20px;
		}
	}
</style>
